<template>
  <div class="BusinessMatrix"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.1)"
    
    >
    
      <div class="secont" v-for="item in serviceData" :key="item.BID">
      <div>
        <div class="img">
          <img src="~@/assets/img/mainPage/jkd.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div>
          <el-progress
            class="businessProgress"
            :text-inside="true"
            :stroke-width="14"
            :percentage="Number((item.HPER * 100).toFixed(0))"
          >
          </el-progress>
        </div>
        <div class="title">
          <span>{{ item.SERVICESNAME }}</span>
        </div>
      </div>
    </div>
    <!-- <el-row :span="24" class="secont">
            <el-col :span="6">
                <div class="img">
                    <img  style="width: 30%" src="~@/assets/img/mainPage/jkd.png" alt="">
                </div>
            </el-col>
            <el-col :span="18" class="content">
                <div class="title">
                    <span>个人保险</span>
                </div>
                <div>
                    <span class="number">50</span>
                    <el-progress class="businessProgress" :text-inside="true" :stroke-width="18" :percentage="50">
                    </el-progress>
                </div>
            </el-col>
        </el-row>
        <el-row :span="24" class="secont">
            <el-col :span="6">
                <div class="img">
                    <img  style="width: 30%" src="~@/assets/img/mainPage/jkd.png" alt="">
                </div>
            </el-col>
            <el-col :span="18" class="content">
                <div class="title">
                    <span>信贷系统</span>
                </div>
                <div>
                    <span class="number">50</span>
                    <el-progress class="businessProgress" :text-inside="true" :stroke-width="18" :percentage="50">
                    </el-progress>
                </div>
            </el-col>
        </el-row>
        <el-row :span="24" class="secont">
            <el-col :span="6">
                <div class="img">
                    <img  style="width: 30%" src="~@/assets/img/mainPage/jkd.png" alt="">
                </div>
            </el-col>
            <el-col :span="18" class="content">
                <div class="title">
                    <span>Quora</span>
                </div>
                <div>
                    <span class="number">50</span>
                    <el-progress class="businessProgress" :text-inside="true" :stroke-width="18" :percentage="50">
                    </el-progress>
                </div>
            </el-col>
        </el-row>
        <el-row :span="24" class="secont">
            <el-col :span="6">
                <div class="img">
                    <img  style="width: 30%" src="~@/assets/img/mainPage/jkd.png" alt="">
                </div>
            </el-col>
            <el-col :span="18" class="content">
                <div class="title">
                    <span>SNS</span>
                </div>
                <div>
                    <span class="number">50</span>
                    <el-progress class="businessProgress" :text-inside="true" :stroke-width="18" :percentage="50">
                    </el-progress>
                </div>
            </el-col>
        </el-row>
        <el-row :span="24" class="secont">
            <el-col :span="6">
                <div class="img">
                    <img  style="width: 30%" src="~@/assets/img/mainPage/jkd.png" alt="">
                </div>
            </el-col>
            <el-col :span="18" class="content">
                <div class="title">
                    <span>卡券支持</span>
                </div>
                <div>
                    <span class="number">50</span>
                    <el-progress class="businessProgress" :text-inside="true" :stroke-width="18" :percentage="50">
                    </el-progress>
                </div>
            </el-col>
        </el-row> -->
  </div>
</template>

<script>
import { fetchData,getBusinessHealth } from "@/api/index.js";
import bus from "common/bus.js";

export default {
  data() {
    return {
      postData: {
        opera: "HealthLevel",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {},
      },
      timerName: "BusinessMatrix",
      timerEventName: "timerBusinessMatrix",
      timerInterval: 1000 * 60,
      serviceData: [],
      loading:false,
      isdebut: true
    };
  },
  created() {
    this.getData();
	this.timein();
    this.isdebut = false
    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getData();
      }
    });
  },
  mounted() {},
  computed: {},
  methods: {
	timein() {
		this.timer = setInterval(() => {
			// 操作
			this.getData();
		}, 30000);
		// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
		// this.$once('hook:beforeDestroy', () => {
		// 	clearInterval(this.timer);
		// })
	},
    getData() {
      if(this.isdebut) {
        this.loading = true
      }
      
      // fetchData({
      //   postData: JSON.stringify(this.postData),
      // }).then((res) => {

      //   // this.serviceData = res.data;

        
      //   // console.log(res)
      //   //开发中临时添加数据
      // //   let data = {
      // //     BID: "2A0398123ACF4231BB9D23FEC0E30037",
      // //     CN: 17,
      // //     HEL: 1,
      // //     HPER: 0.99,
      // //     NHEL: 16,
      // //     ROWNUM: 1,
      // //     SERVICESNAME: "临时数据",
      // //   };
      // // this.serviceData=[...this.serviceData,data]
      // });
      getBusinessHealth().then(_=>{
        if(!_){
          return
        }
       
        this.serviceData=_.map((item,index)=>{
          return {
            HPER:Number(item.hel)/Number(item.cn),
            BID:index,
            SERVICESNAME:item.servicesname


          }
        }).sort((a,b) => {
          return b.HPER - a.HPER
        })

      }).finally(_ => {
        // setInterval( ()=> {

        this.loading = false
      
        // },100)
      })
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
  watch: {},
};
</script>

<style scoped>
@media screen and (max-width: 1365px) and (min-width: 1280px) {
  .title {
    font-size: 12px;
  }
}
@media screen and (max-width: 1600px) and (min-width: 1365px) {
  .title {
    font-size: 14px;
  }
  .secont {
    /* height: 4.6vh; */
    height: calc(4.6vh / var(--zoom));
  }
}
@media screen and (max-width: 1920px) and (min-width: 1600px) {
  .title {
    font-size: 16px;
  }
  .secont {
    height: calc(4.8vh / var(--zoom));
  }
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
  .title {
    font-size: 18px;
  }
  .secont {
    height: calc(4.8vh / var(--zoom));
  }
}
@media screen and (min-width: 2560px) {
  .title {
    font-size: 20px;
  }
  .secont {
    height: calc(4.8vh / var(--zoom));
  }
}
img {
  width: 25px;
  height: 25px;
}
.BusinessMatrix {
  /* height: calc(100% - 22px - 8px); */
  text-align: center;
  color: aliceblue;
  overflow-y: scroll;
  /* 定义滚动条样式 */
  scrollbar-color: #042463 rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}
.BusinessMatrix::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

.BusinessMatrix::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #042463;
}
.BusinessMatrix::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.secont {
  border: 0.5px solid rgb(4, 44, 119);
  margin-bottom: 1%;
  /* height: 50px; */
  border-radius: 25px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 15% auto;
  align-items: center;
  /* min-height: 24px; */
}
.img {
  display: grid;
  /* text-align: center !important; */
  align-items: center;
  justify-items: center;
}
.content {
  overflow-y: hidden;
  height: 100%;
  padding: 0px 0px 0px 0px !important;
}
.title {
  text-align: center;
  overflow: hidden;
  display: block;
  /* font-size: 14px; */
  /* height: 30%; */
  /* padding: 5px 0px 5px 0px !important; */
}
.businessProgress {
  display: inline-block;
  margin-left: 4%;
  width: 85%;
}
.icon {
  text-align: center;
}
.right {
  display: grid;
  grid-template-columns: 70% auto;
}
</style>    